import { useState, useEffect } from 'react';
import { Layout, Menu, Tabs, Dropdown } from 'antd';
import { FormOutlined, DashboardOutlined } from '@ant-design/icons';
const { Header, Content, Sider } = Layout;
const { SubMenu } = Menu;
const { TabPane } = Tabs;

export default function Index() {
  const [menuView, setMenuView] = useState([
    {
      id: '1',
      name: '首页',
    },
    {
      id: '2',
      name: '查询表格',
    },
    {
      id: '3',
      name: '内联编辑表格',
    },
    {
      id: '4',
      name: '标准列表',
    },
    {
      id: '5',
      name: '卡片列表',
    },
    {
      id: '6',
      name: '分类列表',
    },
    {
      id: '7',
      name: '列表搜索',
    },
    {
      id: '8',
      name: '带说明的列表',
    },
    {
      id: '9',
      name: '多选统计列表',
    },
    {
      id: '10',
      name: '金额合计列表',
    },
    {
      id: '11',
      name: '分列对比列表',
    },
    {
      id: '12',
      name: '切换日期列表',
    },
  ]);
  const [tabLists, setTabLists] = useState(
    JSON.parse(localStorage.getItem('list')) || [],
  );
  const [count, setCount] = useState('1');
  const [keys, setKeys] = useState(['1']);
  const [flag, setFlag] = useState(false);
  const dropLists = [
    {
      id: '1',
      value: '刷新',
    },
    {
      id: '2',
      value: '关闭左侧',
    },
    {
      id: '3',
      value: '关闭右侧',
    },
    {
      id: '4',
      value: '关闭其他',
    },
  ];
  const indexRender = () => {
    const obj = menuView.filter((item) => item.id == '1');
    return obj.map((item) => (
      <Menu.Item key={item.id} icon={<FormOutlined />}>
        {item.name}
      </Menu.Item>
    ));
  };
  const listRender = () => {
    return menuView
      .filter((item) => item.id !== '1')
      .map((obj) => <Menu.Item key={obj.id}> {obj.name} </Menu.Item>);
  };
  useEffect(() => {
    localStorage.setItem('list', JSON.stringify(tabLists));
  }, []);
  useEffect(() => {
    flag && setTimeout(() => setFlag(false));
  }, [flag])
  /** 点击菜单添加选项卡 */
  const clickHandler = ({ key }) => {
    setKeys([key]);
    setCount(key);
    if (tabLists.find((item) => item.id == key)) return;
    const obj = menuView.find((item) => item.id == key);
    setTabLists((tabLists) => [...tabLists, obj]);
    localStorage.setItem('list', JSON.stringify([...tabLists, obj]));
  };
  /** 点击选项卡 */
  const tabClickHandler = (key) => {
    setCount(key);
    setKeys(key);
  };
  /** 删除单个 */
  const delHandler = (targetKey) => {
    const obj = tabLists.filter((item) => item.id !== targetKey);
    localStorage.setItem('list', JSON.stringify(obj));
    setCount('1');
    setKeys(['1']);
    setTabLists([...obj]);
  };
  /** 点击下拉菜单的Item项 */
  const dropHandler = (id, key1) => {
    /** 1. 找到当前tab在数组的索引值 */
    const index = tabLists.findIndex((item) => item.id == key1);
    /** 刷新 */
    if (id == 1) {
      setFlag(true)
    } else if (id == 2) {
      /** 关闭左侧 */
      const obj = [...tabLists].slice(index); /** 截取当前到最后的标签 */
      localStorage.setItem('list', JSON.stringify(obj));
      setTabLists([...obj]);
    } else if (id == 3) {
      /** 关闭右侧 */
      const obj = [...tabLists].slice(0, index + 1); /** 截取0 到当前 */
      localStorage.setItem('list', JSON.stringify(obj));
      setTabLists([...obj]);
    } else {
      /** 关闭其他 */
      const obj = tabLists.filter(
        (item) => item.id == key1,
      ); /** 保留和当前相同的 */
      localStorage.setItem('list', JSON.stringify(obj));
      setTabLists([...obj]);
    }
  };
  /** tabs 右键菜单 */
  const menu = (key1) => (
    <Menu>
      {dropLists.map((item) => (
        <Menu.Item key={item.id} onClick={() => dropHandler(item.id, key1)}>
          {item.value}
        </Menu.Item>
      ))}
    </Menu>
  );
  const drop = (value, key1) => {
    return (
      <Dropdown overlay={menu(key1)} trigger={['contextMenu']}>
        <span> {value} </span>
      </Dropdown>
    );
  };
  return (
    <div>
      
      {!flag ? (
        <Layout hasSider>
          <Sider
            style={{
              overflow: 'auto',
              height: '100vh',
              position: 'fixed',
              left: 0,
              top: 0,
              bottom: 0,
            }}
          >
            <div
              className="logo"
              style={{
                height: 70,
                fontSize: 22,
                color: '#fff',
                lineHeight: '70px',
                textAlign: 'center',
              }}
            >
              快速开发平台
            </div>
            <Menu
              theme="dark"
              mode="inline"
              defaultOpenKeys={['sub1']}
              selectedKeys={keys}
              onClick={clickHandler}
            >
              {indexRender()}
              <SubMenu key="sub1" icon={<DashboardOutlined />} title="列表页">
                {listRender()}
              </SubMenu>
            </Menu>
          </Sider>
          <Layout
            className="site-layout"
            style={{
              marginLeft: 200,
            }}
          >
            <Header
              className="site-layout-background"
              style={{
                padding: 0,
              }}
            />
            <Content
              style={{
                margin: '24px 16px 0',
                overflow: 'initial',
                height: '',
              }}
            >
              <div
                style={{
                  height: 60,
                }}
              >
                <Tabs
                  onTabClick={tabClickHandler}
                  onEdit={delHandler}
                  hideAdd
                  activeKey={count}
                  type="editable-card"
                  tabPosition={'top'}
                  style={{
                    height: 220,
                  }}
                >
                  {tabLists.map((item) => (
                    <TabPane
                      tab={drop(item.name, item.id)}
                      key={item.id}
                    ></TabPane>
                  ))}
                </Tabs>
              </div>
            </Content>
          </Layout>
        </Layout>
      ) : (
        ''
      )}
    </div>
  );
}
